<template>
    <div class='container container--zone'>
        <!-- 包含左边两部分一起 -->
        <div class='region region--primary'>
            <div class='component component--curated curated--C'>
                <!--左边上部分-->
                <div class='column column--primary'>
                    <!-- 左边里面的上部分 -->
                    <div class="element element--article no-image is-lead">
                        <div class="article__content">
                            <h3 class="article__headline">
                                <span class="article__label earnings watch"></span>
                                <router-link class="link"
                                    :to="{ name: 'NewDetail', params: { uuid: props.bigImgData.uuid, author: props.bigImgData.author } }">
                                    {{ props.bigImgData.title }}
                                </router-link>
                            </h3>
                            <p class="article__summary"></p>
                        </div>
                    </div>
                    <!-- 左边里面的下边部分 -->
                    <div class="element element--article is-lead">
                        <!-- 中间图片 -->
                        <figure class="article__figure">
                            <router-link class="figure__image disableShadowBox"
                                :to="{ name: 'NewDetail', params: { uuid: props.bigImgData.uuid, author: props.bigImgData.author } }">
                                <img class="lazyautosizes" :data-srcset="bigImgData.imgUrl" sizes="620px"
                                    :srcset="props.bigImgData.imgUrl" v-if="props.bigImgData.imgUrl">
                                <img src="../../../assets/detail-noImg.png" v-else>
                            </router-link>
                        </figure>
                        <div class="article__content">
                            <div class="content--secondary">
                                <!-- <div class="group group--tickers">
                                    <bg-quote v-for="item in tickerData" :key='item.id'
                                        :class="[item.number < 0 ? 'negative' : 'positive']">
                                        <router-link class="ticker"
                                            :to="{ path: '/newDetail', query: { uuid: item.uuid } }">
                                            <span class="ticker__symbol">{{ item.symbol }}</span>
                                            <bg-quote class="ticker__change">{{ item.change
                                                }}</bg-quote>
                                            <i class="icon"></i>
                                        </router-link>
                                    </bg-quote>
                                </div> -->
                                <ul class="list list--bullets">
                                    <li class="bullet__item" v-for="item in props.bulletsData" :key='item.uuid'>
                                        <router-link class="link"
                                            :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                                            {{ item.title }}
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 上中间部分 -->
                <div class='column column--aside'>
                    <div class='element element--article'>
                        <figure class="article__figure">
                            <router-link class="figure__image disableShadowBox"
                                :to="{ name: 'NewDetail', params: { uuid: props.asideoneImg.uuid, author: props.asideoneImg.author } }">
                                <img class="lazyautosizes" :srcset="props.asideoneImg.imgUrl" sizes='300px'
                                    v-if="props.asideoneImg.imgUrl">
                                <img src="../../../assets/noimg.png" alt="" v-else>
                            </router-link>
                        </figure>
                        <div class='article__content'>
                            <h3 class="article__headline">
                                <router-link class="link"
                                    :to="{ name: 'NewDetail', params: { uuid: props.asideoneImg.uuid, author: props.asideoneImg.author } }">
                                    {{ props.asideoneImg.title }}
                                </router-link>
                            </h3>
                            <div class="content--secondary">
                                <ul class="list list--bullets">
                                    <li class="bullet__item" v-for="item in props.asidebulletsData" :key='item.uuid'>
                                        <router-link class="link"
                                            :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                                            {{ item.title }}
                                        </router-link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 中间底部部分 -->
                    <div class="list list--articles">
                        <div class="element element--article" v-for="(item, index) in props.asideArticleData"
                            :key='item.uuid'>
                            <div class="article__content">
                                <h3 class="article__headline">
                                    <router-link class="link"
                                        :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                                        <span class="label--opinion" v-if='index === 0'>Opinion: </span>{{ item.title }}
                                    </router-link>
                                </h3>
                            </div>
                        </div>

                    </div>
                    <!-- 最右边的图片 -->
                </div>
                <!-- 左下部分 -->
                <div class='column column--full'>
                    <onePicText :botfullData='props.botfullData'></onePicText>
                </div>
            </div>
            <irtextImg v-if="isirtextImg"></irtextImg> <!-- 左右图文部分 -->
            <myLike :likeData="likeData" v-if="isLike"></myLike> <!-- 我喜欢的内容推送 -->
            <subNow :subNowData="subNowData"></subNow> <!-- 订阅-->
        </div>
        <!-- 最右边单独排版 -->
        <div class="region region--aside sticky">
            <div class="sticky__innards" style="position:static;">
                <section class="component component--module ad">
                    <div class="element element--ad is-loaded">
                        <div id="ad-display-ad" class="j-ad">
                            <router-link to="">
                                <img :src="rightImg" border="0" width="300" height="250" alt="" class="img_ad">
                            </router-link>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</template>
<script setup>
import onePicText from '../../../components/onePicText/onePicText.vue'
import irtextImg from '../../../components/lrtextImg/irtextImg.vue'
import myLike from '../../../components/myLike/myLike.vue';
import subNow from '../subNow/subNow.vue';
import homeRequest from "@/api/home.js";
import { useDataArrays } from '../../../api/data.js'
import { onMounted } from 'vue';
const { subNowData } = useDataArrays();
const isirtextImg = ref(false)
const props = defineProps(['bigImgData', 'asideoneImg', 'asidebulletsData', 'bulletsData', 'botfullData', 'imgData', 'asideArticleData']);
const likeData = ref([])
const isLike = ref(false)
// 最左边图片下面内容
const tickerData = reactive([
    {
        symbol: props.bigImgData.company, change: props.bigImgData.ticketChange, id: props.bigImgData.uuid
    }
])
tickerData.forEach(item => {
    if (item.change) {
        item.number = parseFloat(item.change.replace('%', '').replace(/[^0-9.-]/g, ''));
    }
});

const rightImg = ref('../../src/assets/ceAdver.png')
// 左下边部分内容 botfullData
// const botfullData = [] // 数据不够后面要加
// botfullData[0].secondary = props.newsList.slice(26, 28)
// botfullData[1].secondary = props.newsList.slice(28, 30)
// botfullData[2].secondary = props.newsList.slice(30, 32)
// botfullData[3].secondary = props.newsList.slice(32, 34)
// botfullData[4].secondary = props.newsList.slice(34, 36)
// botfullData[5].secondary = props.newsList.slice(36, 38)
onMounted(() => {
    console.log('11111111')
    list()
})
const list = () => {
    let data = {
        current: 1,
        size: 20,
        isImg: 1,
        key: 'mightLike'
    }
    //mylike部分
    homeRequest.newsData(data)
        .then((res) => {
            if (res.code === 0) {
                likeData.value = res.data.records
                isLike.value = true
            }
        })
        .catch((e) => {
        });
}
</script>

<style scoped lang='scss'></style>
